$(function () {
  // 获取用户信息，渲染页面;
  // 封装成功函数，全局函数！
  getUserInfo();

  // 退出
  $("#logout").on("click", function () {
    // layui里面的询问框,点击确定才会执行回调函数里的代码
    layer.confirm(
      "确认退出登录吗？",
      { icon: 3, title: "提示" },
      function (index) {
        // 销毁token,跳转到登录页
        localStorage.removeItem("token");
        location.href = "/login.html";
        // 关闭询问框
        layer.close(index);
      }
    );
  });
});

// 封装获取用户信息函数；
// 封装成功函数，全局函数！
function getUserInfo() {
  // 发送ajax
  axios({
    url: "/my/userinfo",
    // headers属性可以自定义请求头信息，headers这个属性带s，注意大小写
    // headers: {
    //   Authorization: localStorage.getItem("token"),
    // },
  }).then((res) => {
    console.log(res.data);
    if (res.data.status !== 0) {
      return layui.layer.msg(res.data.message);
    }
    // 成功就可以渲染了
    renderAvatar(res.data.data);
  });
}

// 封装一个函数，渲染用户信息
function renderAvatar(user) {
  // 1.渲染欢迎信息 - 如果有 nickname 优先渲染，没有就渲染 username
  //     || 如果第一项为true类型，就返回第一项;
  //     && 如果第一项为false类型，就返回第一项;
  let name = user.nickname || user.username;
  $(".welcome").html("欢迎!&nbsp;" + name);
  // 2.渲染头像 - 有图片头像优先渲染图片头像，没有图片渲染文字头像！
  if (user.user_pic !== null) {
    // 图片存在，渲染图片头像，隐藏文字头像
    $(".layui-nav-img").show().attr("src", user.user_pic);
    $(".text-avatar").hide();
  } else {
    // 图片不存在，渲染文字头像，隐藏图片头像
    $(".layui-nav-img").hide();
    // 把name的首个单词字符串获取到，转为大写，然后赋值
    let first = name[0].toUpperCase();
    $(".text-avatar").show().html(first);
  }
}

console.log("天地玄黄，宇宙洪荒。日月盈昃，辰宿列张 。");
